<script setup lang="ts">
import { useHospitalDetailStore } from '../../../../store/modules/hospital/index';
const { hospitalInfo } = useHospitalDetailStore();
const { hospital } = hospitalInfo;
</script>
<template>
  <div class="detail">
    <!-- 医院名称  医院等级 -->
    <div class="top">
      <div class="title">{{ hospital?.hosname }}</div>
      <div class="level">
        <svg
          data-v-f5b63fb5=""
          t="1688268893064"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="897"
        >
          <path
            data-v-f5b63fb5=""
            d="M891.392 870.4a40.96 40.96 0 1 1 0 81.92H117.76a40.96 40.96 0 1 1 0-81.92h773.632zM501.76 153.6a40.96 40.96 0 0 1 40.96 40.96v517.632a40.96 40.96 0 1 1-81.92 0V194.56a40.96 40.96 0 0 1 40.96-40.96zM215.04 51.2a40.96 40.96 0 0 1 40.96 40.96v620.032a40.96 40.96 0 1 1-81.92 0V92.16a40.96 40.96 0 0 1 40.96-40.96z m573.44 204.8a40.96 40.96 0 0 1 40.96 40.96v415.232a40.96 40.96 0 1 1-81.92 0V296.96a40.96 40.96 0 0 1 40.96-40.96z"
            fill="currentcolor"
            p-id="898"
          ></path>
        </svg>
        <span>{{ hospital?.param?.hostypeString }}</span>
      </div>
    </div>
    <!-- 医院介绍 -->
    <div class="intro">
      <div class="intro1">
        <div class="left">
          <img :src="`data:image/jpeg;base64,${hospital?.logoData}`" alt="" />
        </div>
        <div class="right">
          <div class="rbox">
            <div class="content">
              <div class="item">
                <span class="item-title">
                  <el-icon><Aim /></el-icon>
                  具体位置：</span
                >
                <span class="item-text">{{ hospital?.param?.fullAddress }}</span>
              </div>
              <div class="item">
                <span class="item-title">规划路线：</span>
                <span class="item-text">{{ hospital?.route }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="intro2">
        <div class="intro-title">医院介绍</div>
        <p class="intro-content">{{ hospital.intro }}</p>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.detail {
  .top {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    .title {
      color: #333;
      font-size: 20px;
      font-weight: 700;
      margin-right: 15px;
    }
    .level {
      display: flex;
      align-items: center;
      color: #999;
      font-size: 14px;
      .icon {
        width: 14px;
        height: 14px;
      }
      > span {
        font-size: 14px;
        margin: 0 3px;
      }
    }
  }
  .intro {
    margin-top: 20px;
    .intro1 {
      display: flex;
      align-items: flex-start;
      .left {
        width: 80px;
        overflow: hidden;
        margin: 10px;
        img {
          width: 80px;
          height: 80px;
        }
      }
      .right {
        flex: 1;
        margin: 0 20px;
        .rbox {
          margin-bottom: 20px;
          .rtitle {
            color: #333;
            font-size: 14px;
            margin: 10px 0;
          }
          .content {
            color: #999;
            font-size: 14px;
            line-height: 25px;
            letter-spacing: 1px;
            font-weight: normal;
            .item {
              display: flex;
              .item-title {
                display: flex;
                align-items: center;
                .el-icon {
                  margin-right: 5px;
                }
              }
              .item-text {
                text-align: justify;
              }
            }
          }
        }
      }
    }

    .intro2 {
      .intro-title {
        letter-spacing: 1px;
        font-weight: 700;
        color: #333;
        font-size: 16px;
      }
      .intro-content {
        padding: 15px 0;
        color: #999999;
        line-height: 25px;
        text-indent: 2em;
        text-align: justify;
        letter-spacing: 1px;
      }
    }
  }
}
</style>
